<template>
    <div class='searchwrap'>
        <form action="/">
            <van-search
                v-model="value"
                show-action
                placeholder="搜索更多家居好物"
                @search="onSearch"
                @cancel="onCancel"
            />
        </form>
        <p>历史搜索</p>
        <div class='wu'>
            暂无搜索历史
        </div>
        <div class='hot'>热门搜索 
            <van-icon name="replay" />
            <span>换一批</span>
        </div>
        <ul>
            <li>袜子</li>
            <li>枕头</li>
            <li>加热</li>
            <li>蚕丝被</li>
            <li>四件套</li>
            <li>锅</li>
        </ul>
    </div>  
</template>

<script>
export default {
    data() {
        return {
            value:''
        }
    },
    methods: {
        onSearch(val) {
            
        },
        onCancel() {
            this.$router.go(-1)
        },
    },
}
</script>

<style lang='stylus'>
    .van-search__action{
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #353535;
    }
    .van-field__control{
        text-indent 10px
    }
    .van-search{
        border-bottom 1px #F0F0F0 solid
        padding 0
    }
    .searchwrap{
        p{
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #353535;
            margin-top 20px
            text-indent 10px 
        }
        .wu{
            width 100%
            height 100px
            display flex
            justify-content center
            align-item center
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ccc;
            margin-top 20px
        }
        .hot{
            text-indent 10px 
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #353535;
            display flex
            align-items center
            .van-icon{
                display inline-block
                margin-left 200px
            }
            span{
                margin-left 5px
            }
        }
        ul{
            margin-left 10px
            margin-top 20px
            display flex
            li{
                border-radius 50px
                background-color #ccc
                text-align center
                width 40px
                height 20px
                font-size: 10px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #353535;
                line-height 20px
                margin-right 10px
            }
        }
    }
</style>